<template>
	<view class="body">
		<view class="v_header" style="background-color: #fff">
			<!-- 头像 -->
			<view class="v_avatar">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view class="demo-layout bg-purple"></view>
					</u-col>
					<u-col span="4" style="text-align: center;font-size: 3.2vw;padding: 4.4vw;">
						<view class="demo-layout bg-purple-light">
							<u-avatar :src="src" size="168" style="margin: 1.2vw auto;"></u-avatar>
						</view>
						<span>点击更换头像</span>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-dark"></view>
					</u-col>
				</u-row>
			</view>
			<!-- 昵称 -->
			<view class="v_nick" style="padding: 0 4.34vw;">
				<view style="font-size: 3.73vw;font-weight: 600;">
					昵称
				</view>
				<input type="text" class="v_inp" placeholder="请输入昵称">
			</view>
			<u-divider text=""></u-divider>
			<!-- 地区 -->
			<view class="v_pick" style="padding: 0 4.34vw;" @click="show=true">
				<!-- <u-cell-group>
					<u-cell size="large" title="所在地" value="内容" isLink rightIconStyle="font-size: 32px"
						@click="show = true" :border="false" :customStyle="btnGetCode"></u-cell>
				</u-cell-group> -->
				<view class="u-demo-block__content">
					<u-row justify="space-between" gutter="5" align="center">
						<u-col span="5">
							<view class="demo-layout bg-purple-light" style="font-size: 3.73vw;">
								所在地
							</view>
						</u-col>
						<u-col span="4.5">
							<view class="demo-layout bg-purple" style="font-size: 3.73vw; text-align: right;">
								河南省-新乡市
							</view>
						</u-col>
						<u-col span="0.5">
							<view class="demo-layout bg-purple-dark">
								<u-icon name="arrow-right" size="36"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="cancel">
				</u-picker>
				</u-picker>
			</view>
		</view>

		<view class="v_bottom">
			<button class="btn">完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				value: '',
				show: false,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				]
			}
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			cancel(){
				this.show=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		position: relative;
		height: 100vh;
		background-color: #F7F8FA;
	}

	.v_pick {
		height: 8.06vw;
		u-picker {
			background-color: red;
			font-size: 3.73vw !important;
		}
	}

	.v_bottom {
		width: 100%;
		height: 12.34vw;
		padding: 2.24vw;
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #fff;

		.btn {
			width: 50%;
			height: 9.07vw;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #1BA784;
			color: #fff;
			font-size: 3.73vw;
		}
	}

	u--text {
		font-weight: 600;
	}

	.v_inp {
		height: 4.86vw;
		width: 100%;
		font-size: 3.73vw;
		margin: 2.76vw 0;
	}
</style>
